<template>
    <ex-dialog width="800px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px">
            <el-form-item label="导航数量:" prop="imgNum">
                <el-select v-model="ruleForm.imgNum" placeholder="请选择" :style="{ width: inputWidth }" @change="numChange">
                    <el-option v-for="item in numOptions" :key="item.id" :label="item.value" :value="item.id">
                    </el-option>
                </el-select>
                <!-- <el-button type="primary" @click="submitRuleForm('ruleForm')" :loading="sumitLoading">保存提交</el-button> -->
            </el-form-item>
            <el-form-item label="预览:">
                <div class="preview">
                    <div class="preview_box" v-for="(item,index) in imgList" :key="index" @click="lookView(item,index)">
                        <div class="img_box">
                            <img :src="item.imgUrl" alt="" v-if="item.imgUrl!=''">
                            <i class="el-icon-picture-outline" v-if="item.imgUrl==''"></i>
                        </div>
                        <div class="preview_box_txt" v-if="item.title==''">图片{{index+1}}</div>
                        <div class="preview_box_txt" v-if="item.title!=''">{{item.title}}</div>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <el-dialog width="800px" :title="'图片' + (changeIndex + 1) + '跳转配置'" :visible.sync="innerVisible" append-to-body :close-on-click-modal="false" @close="innerHandleClose">
            <el-form ref="form" :model="form" :rules="rules" label-width="140px">
                <el-form-item :label="'图片' + (changeIndex + 1) + '标题:'" prop="title" key="1">
                    <el-input placeholder="请输入" v-model="form.title" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="icon:" prop="imgUrl" ref="imgUrlImgRef" key="2">
                    <ImageUploadMore :limit="1" :fileSize="20" @successImg="getIconUrl" :value="form.imgUrl">
                    </ImageUploadMore>
                </el-form-item>
                <el-form-item label="跳转方式:" prop="skipType" key="3">
                    <el-select v-model="form.skipType" placeholder="请选择" :style="{ width: inputWidth }">
                        <el-option v-for="item in typeLs" :key="item.id" :label="item.value" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="跳转链接:" prop="skipUrl" v-if="form.skipType=='2'" key="4">
                    <el-input placeholder="请输入" v-model="form.skipUrl" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="选择插件:" prop="pluginId" v-if="form.skipType=='1'" key="5">
                    <el-select v-model="form.pluginId" placeholder="请选择" :style="{ width: inputWidth }" @change="pluginChange">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择跳转页面:" prop="pageId" v-if="form.skipType=='1'" key="6">
                    <el-select v-model="form.pageId" placeholder="请选择" :style="{ width: inputWidth }">
                        <el-option v-for="item in optionsView" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('form')" :loading="sumitLoading">保存提交</el-button>
                <el-button @click="innerHandleClose">取 消</el-button>
            </div>
        </el-dialog>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitRuleForm('ruleForm')" :loading="sumitLoading">保存提交</el-button>
            <el-button @click="handleClose">取 消</el-button>
        </div>
    </ex-dialog>
</template>
  
<script>
import {
    homePageNavigation,homePageNavigationSet,homePageNavigationShow,homePagePlugin,homePagePagePluginIdView,
    jtkHomePageSkip,jtkHomePageSkipSet
} from '@/api/incentiveManagement/adConfigNew'
export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    props: {
        visible: Boolean,
        id: String,
        pathType: String,
    },
    data() {
        return {
            title:'导航配置',
            inputWidth: '400px',
            innerVisible: false,
            sumitLoading: false,
            loading: false,
            showTypeDisabled: false,
            info:{},
            changeIndex: 0,
            imgList:[],
            ruleForm:{
                imgNum: '',//图片数量
            },
            form: {
                id:'',//
                // classificationId:'',//分类导航栏ID
                imgUrl:'',//图片url
                skipUrl: '',//小程序链接
                pageId:'', //跳转页面ID
                pluginId:'', //插件ID
                skipType:'',//跳转方式1小程序插件，2小程序链接
                title:'',//标题
            },
            numOptions:[
                {id:'4',value:'4'},{id:'5',value:'5'},{id:'8',value:'8'},{id:'10',value:'10'}
            ],
            typeLs:[
                {id:'1',value:'小程序插件'},{id:'2',value:'小程序链接'}
            ],
            options:[],//插件下拉
            optionsView:[],//跳转页面下拉
            // 表单校验
            rules: {
                imgNum: [{
                    required: true,
                    message: "请选择导航数量",
                    trigger: ['change', 'blur'],
                }],
                title: [{
                    required: true,
                    message: "请输入标题",
                    trigger: ['change', 'blur'],
                }],
                imgUrl: [{
                    required: true,
                    message: "请选择图片",
                    trigger: 'change',
                }],
                skipType: [{
                    required: true,
                    message: "请选择跳转方式",
                    trigger: ['change', 'blur'],
                }],
                skipUrl: [{
                    required: true,
                    message: "请输入跳转链接",
                    trigger: ['change', 'blur'],
                }],
                pluginId: [{
                    required: true,
                    message: "请选择插件",
                    trigger: ['change', 'blur'],
                }],
                pageId: [{
                    required: true,
                    message: "请选择跳转页面",
                    trigger: ['change', 'blur'],
                }],
            },
        };
    },
    created() {
        console.log(888,this.id)
        this.getDetail()
        this.getHomePagePlugin()
    },
    methods: {
        numChange(e){
            let num = Number(e)
            let apiNum = 0
            console.log(num)
            if(this.info.imgNum==''){
                apiNum = 0
            }else{
                apiNum = Number(this.info.imgNum)
            }
            console.log('apiNum',apiNum)
            if(num>Number(this.info.imgNum)){
                let addNum = num - apiNum
                console.log('addNum',addNum)
                // this.imgList = []
                for (var i = 0; i < addNum; i++){
                    this.addImgList()
                }
            }else{
                let jianNum = apiNum - num
                console.log('Jians',jianNum)
                this.imgList.splice(-jianNum, jianNum)
                this.info.imgNum = this.ruleForm.imgNum
            }
            console.log('最终apinum',apiNum)
        },
        addImgList(){
            var obj = {
                id:'',//ID编辑时传，新增不用传
                classificationId:'',//分类导航栏ID
                imgUrl:'',//图片url
                skipUrl: '',//小程序链接
                pageId:'', //跳转页面ID
                pluginId:'', //插件ID
                skipType:'',//跳转方式1小程序插件，2小程序链接
                title:'',//标题
            }
            this.imgList.push(obj)
            this.info.imgNum = this.ruleForm.imgNum
            console.log('this.imgList',this.imgList)
        },
        //设置显示状态
        setHomePageNavigationShow(){
            this.showTypeDisabled = true
            homePageNavigationShow(this.info.showType).then(res => {
                this.$message.success('操作成功');
                this.getDetail()
                this.showTypeDisabled = false
            }).catch(()=>{
                this.getDetail()
                this.showTypeDisabled = false
            })
        },
        //图片配置
        lookView(item,index){
            this.changeIndex = index
            if(item.pluginId!=''){
                this.getHomePagePagePluginId(item.pluginId)
            }
            this.form = {
                id: item.id,//ID编辑时传，新增不用传
                classificationId: item.classificationId,//分类导航栏ID
                imgUrl: item.imgUrl,//图片url
                skipUrl: item.skipUrl,//小程序链接
                pageId: item.pageId, //跳转页面ID
                pluginId: item.pluginId, //插件ID
                skipType: item.skipType,//跳转方式1小程序插件，2小程序链接
                title: item.title,//标题
            },
            this.innerVisible = true
            setTimeout(()=>{
                this.$refs['imgUrlImgRef'].clearValidate();
                if(item.imgUrl==''){
                    this.$refs['form'].resetFields();
                }
            },10)
            
            // this.$refs['form'].resetFields();
        },
        //图片上传
        getIconUrl(e) {
            this.form.imgUrl = e
            this.$refs['imgUrlImgRef'].clearValidate();
        },
        //获取详情
        getDetail() {
            var data = {
                classificationId: this.id
            }
            jtkHomePageSkip(data).then(res => {
                this.ruleForm.imgNum = res.result.imgNum
                this.info = res.result
                this.imgList = res.result.skipVOS
            })
        },
        //内层弹窗取消
        innerHandleClose(){
            // this.getDetail()
            this.innerVisible = false
        },
        //获取插件下拉列表
        getHomePagePlugin() {
            var data = {}
            homePagePlugin(data).then(res => {
                this.options = res.result
            })
        },
        //插件选择
        pluginChange(e){
            this.getHomePagePagePluginId(e)
            this.form.pageId = ''
        },
        //获取组件下拉
        getHomePagePagePluginId(pluginId){
            homePagePagePluginIdView(pluginId).then(res => {
                this.optionsView = res.result
            })
        },
        //取消
        handleClose(formName) {
            this.$emit('update:visible', false)
            // this.$emit('success')
        },
        submitRuleForm() {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    let isWrite = true
                    this.imgList.forEach((item)=>{
                        if(item.imgUrl==''){
                            isWrite = false
                        }else{
                            isWrite = true
                        }
                    })
                    console.log('isWrite',isWrite)
                    if(!isWrite){
                        this.$message.error('请设置图片信息');
                    }else{
                        var data = {
                            classificationId: this.id,
                            imgNum: this.ruleForm.imgNum,
                            skipDTOS: this.imgList
                        }
                        this.sumitLoading = true
                        jtkHomePageSkipSet(data).then(response => {
                            this.$message.success('操作成功');
                            this.$emit('success')
                            this.handleClose()
                        }).catch(() => {
                            this.sumitLoading = false;
                        });
                    }
                }
            });
        },
        /** 执行按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.imgList[this.changeIndex] = this.form
                    this.innerVisible = false
                    var data = {
                        ...this.form
                    }
                    console.log(data)
                    // this.sumitLoading = true
                    // homePageNavigationSet(data).then(response => {
                    //     this.$message.success('操作成功');
                    //     this.getDetail()
                    //     this.innerVisible = false
                    // }).catch(() => {
                    //     this.sumitLoading = false;
                    // });
                }
            });
        },
    }
};

</script>
<style scoped>
.main {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
}

.icon_yes {
    font-size: 28px;
    color: #67c23a;
}

.el-select {
    width: 640px;
}

.el-button {
    margin: 0 20px;
}
.select-flow{
    width: 500px;
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
::v-deep .el-tag.el-tag--info{
    max-width: 300px;
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.preview{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.preview_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
}
.preview_box_txt{
    width: 100px;
    text-align: center;
    font-size: 14px;
    color: #2C2A2F;
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    word-break: break-all;
}
.img_box{
    width: 100px;
    height: 100px;
    border: 1px dashed #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
}
.img_box img{
    width: 80px;
    height: 80px;
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>
  